<template>
	<view class="content">
		<view class="content-block" style="border-radius: 20rpx;">
			<view class="top">
				<view class="title  FangZhengHanZhenGuangBiaoJianTi">
					{{incubatorsList.name}}
				</view>
				<view class="site">
					{{incubatorsList.address}}
				</view>
			</view>
			<view class="bottom">
				<view class="item" style="background-color: #FEF6F4;"
					@click="navigate('/page_other/serve/base?type=1&fatherId='+incubatorsList.id)">
					<view class="left">
						<view class="title FangZhengHanZhenGuangBiaoJianTi">
							基本情况
						</view>
						<view class="small-title">
							创业孵化基本情况
						</view>
					</view>
					<view class="right">
						<view class="ico">
							<image
								src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/cyfw/%E5%9F%BA%E5%9C%B0%E7%AE%80%E4%BB%8B.png"
								mode=""></image>
						</view>
						<view class="more iconfont icon-gengduo1">
							<!-- <image src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/cyfw/%E6%9B%B4%E5%A4%9A.png" mode=""></image> -->
						</view>
					</view>
				</view>
				<view class="item" style="margin-top: 30rpx;"
					@click="navigate('/page_other/serve/management?type=2&fatherId='+incubatorsList.id)">
					<view class="left">
						<view class="title FangZhengHanZhenGuangBiaoJianTi">
							基地简介
						</view>
						<view class="small-title">
							创业孵化基地基地简介
						</view>
					</view>
					<view class="right">
						<view class="ico">
							<image
								src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/cyfw/%E7%AE%A1%E7%90%86%E5%8A%9E%E6%B3%95.png"
								mode=""></image>
						</view>
						<view class="more iconfont icon-gengduo1">
							<!-- <image src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/cyfw/%E6%9B%B4%E5%A4%9A.png" mode="" style="width: 100%;height: 100%;"></image> -->
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getIncubatorsListApi,
		getIncubatorsByIdApi,
		getIncubatorsArticleByFatherIdApi
	} from '@/api/incubation_base.js';
	export default {
		data() {
			return {
				incubatorsList: {
					name: '',
					address: ''
				},
				id: 1,
			}
		},

		methods: {
			navigate(url) {
				uni.navigateTo({
					url
				})
			},
			getIncubatorsById() {
				getIncubatorsByIdApi({
					id: this.id
				}).then((res) => {
					this.incubatorsList = res ?? [];
					console.log(this.incubatorsList)
				})
			},
		},
		onLoad(e) {
			this.id = e.id;
			this.getIncubatorsById()
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100%;

		.content-block {
			width: 100%;
			height: 100%;

			.top {
				width: 100%;
				height: 350rpx;
				background-color: #fff;
				padding: 40rpx;
				border-radius: 30rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.title {
					// font-weight: 900;
				}

				.site {
					margin-top: 50rpx;
				}

			}

			.bottom {
				width: 100%;
				padding: 30rpx;
				background-color: #fff;
				border-radius: 30rpx;

				.item {
					width: 100%;
					height: 220rpx;
					padding: 20rpx;
					border-radius: 20rpx;
					background-color: #ECFAED;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.left {
						width: 60%;
						height: 100%;
						line-height: 75rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;

						.title {
							// font-weight: 900;
							font-size: 40rpx;
						}
					}

					.right {
						width: 35%;
						height: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;


						.ico {
							width: 70%;
							height: 100%;

							image {
								width: 100%;
								height: 100%;
							}

						}

						.more {
							width: 20%;
							height: 30%;
							margin: 40rpx 0 0 0;

							image {
								width: 100%;
								height: 100%;
							}
						}
					}
				}
			}
		}

	}
</style>